<template>
  <div id="app">
    <div class="left_box">
      <div
        class="left_item"
        :class="item.path === $route.path ? 'active' : ''"
        v-for="item in leftList"
        :key="item.path"
        @click="goNav(item)"
        :title="item.meta.title"
      >
        {{ item.meta.title }}
      </div>
    </div>
    <div class="right_box">
      <div class="first_box">
        <Title />
      </div>
      <div class="second_box">
        <router-view />
      </div>
      <div class="third_box">
        <MarkDown />
      </div>
    </div>
  </div>
</template>
<script>
import { routes } from "./router/index";
// 注册标题组件
export default {
  data() {
    return {
      leftList: [],
      scaleLeftFlag: false,
    };
  },
  components: {
    Title: () => import("@/components/Title"),
    MarkDown: () => import("@/components/MarkDown"),
  },
  methods: {
    goNav(item) {
      // 定位笔记 内容区
      const title = item.meta?.title;
      if (title) {
        // 正则替换  这里根据 md 生成的dom 去看的
        const id = title
          .replace(/\s/g, "-")
          .toLowerCase()
          .replace(".", "")
          .trim();
        console.log("id", id);
        // 找到英文
        const dom = document.getElementById(id);
        console.log("dom", dom);
        dom?.scrollIntoView();
      }

      // 跳转目标页面
      const path = item.path;
      if (this.$route.path === path) return;
      this.$router.push(path);
    },
    scaleLeft() {
      this.scaleLeftFlag = !this.scaleLeftFlag;
      localStorage.setItem("appScaleLeftFlag", this.scaleLeftFlag);
    },
  },
  mounted() {
    this.scaleLeftFlag =
      JSON.parse(localStorage.getItem("appScaleLeftFlag")) || false;

    // 根据路由生产左侧菜单
    this.leftList = routes.map((item) => {
      return {
        path: item.path,
        name: item.name,
        meta: item.meta,
      };
    });
  },
  beforeDestroy() {
    console.log("beforeDestroy");
    localStorage.removeItem("appScaleLeftFlag");
  },
  computed: {
    mdUrl() {
      console.log("this.$route", this.$route);
      if (this.$route?.name) {
        const split = this.$route.name.split("I");
        return `src/views/${split[0]}/i${split[1]}.md`;
      } else {
        return "请在router/index.js 中 name 中配置路径";
      }
    },
  },
};
</script>
<style scoped>
#app {
  display: flex;
}
.left_box {
  width: 20%;
  /* border: 1px solid #004896; */
  height: 960px;
  /* height: 100%; */
  padding-right: 20px;
  transition: 1s all;
  overflow: auto;
}

.left_item {
  height: 30px;
  line-height: 30px;
  text-align: center;
  margin-top: 10px;
  border-radius: 5px;
  border: 1px solid #000;
  overflow: hidden;
}
.left_item:hover {
  background-color: #004896;
  color: #fff;
  opacity: 0.5;
  cursor: pointer;
}
.left_item.active {
  background-color: #004896;
  color: #fff;
}
.right_box {
  width: 80%;
}

.right_box .md_title {
  width: 90%;
  margin: 20px auto;
}
.right_box .second_box {
  margin-bottom: 20px;
}
.right_box .third_box {
  width: 90%;
  padding: 10px;
  height: 350px;
  margin: 0 auto;
  overflow: auto;
  box-sizing: border-box;

  border: 1px solid #004896;
  border-radius: 10px;
}
</style>
